<template>
	<view class="page">
		<CustomNav :isBack="true" color="#fff" :topBgColor="topBgColor" title="投诉建议"></CustomNav>
		<image src="https://jinta-gas-charge-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/home/banner.png"
			class="bg-img" mode="widthFix"></image>
		<view class="info-block">
			<view class="title">投诉建议：</view>
			<textarea placeholder="请输入您的投诉或建议..." maxlength="10" v-model="form.complaintContent"
				class="form-crl"></textarea>
		</view>
		<view class="btn-item">
			<view class="btn normal" @click="payment">提交</view>
		</view>
	</view>
</template>

<script>
	import {
		validate
	} from '@/util/validate.js'
	import {
		addComplaintApi
	} from '@/api/complaint.js'
	export default {
		components: {},
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				form: {
					complaintContent: ''
				},
				rules: {
					complaintContent: {
						name: '投诉建议',
						required: true
					}
				}
			}
		},
		watch: {

		},
		methods: {
			payment() {
				if (validate(this.form, this.rules)) {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					addComplaintApi(this.form).then((res) => {
						this.showToast('提交成功', () => {
							uni.redirectTo({
								url: '/page_pack/complaint/my_complaint'
							})
						}, 1000)
					});
				}
			}
		},
		onLoad() {

		}
	}
</script>

<style lang="scss">
	.page {
		overflow: hidden;
		min-height: 100vh;
		background-color: #F4F8FF;

		.bg-img {
			width: 100%;
			height: 100%;
		}

		.info-block {
			width: calc(100% - 60rpx);
			margin: 30rpx auto;
			margin-top: -70rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;

			.title {
				margin-bottom: 30rpx;
				font-size: 32rpx;
			}

			.form-crl {
				width: 100%;
				background-color: #F6F6F6;
				padding: 20rpx 30rpx;
				font-size: 30rpx;
				border-radius: 16rpx;
			}
		}

		.btn-item {
			display: flex;
			justify-content: center;
			margin-top: 40rpx;
		}
	}
</style>